<template>
  <div class="bg">
    <!-- 首页数据展示 -->
    <el-row>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
          <div class="box">
            <div class="boxleft">
              <div>昨日新增用户</div>
              <div>{{addUserNum.yestarDayUser==null?0:addUserNum.yestarDayUser}}</div>
            </div>
            <div class="boxright">
              <i class="el-icon-s-marketing"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
          <div class="box">
            <div class="boxleft">
              <div>昨日新增入驻商家</div>
              <div>{{addUserNum.yesterDayNumber==null?0:addUserNum.yesterDayNumber}}</div>
            </div>
            <div class="boxright">
              <i class="el-icon-s-shop"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
          <div class="box">
            <div class="boxleft">
              <div>昨日营收</div>
              <div>{{addUserNum.yestarDatOrderMoney==null?0:addUserNum.yestarDatOrderMoney}}</div>
            </div>
            <div class="boxright">
              <i class="el-icon-s-data"></i>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据图表 -->
    <el-row>
      <el-col :span="24">
        <el-card class="card">
          <div id="myChart" :style="{width: '100%', height: '600px'}"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      addUserNum: {},
      //  获取图形列表
      getEcharts: {}
    };
  },
  mounted() {
    // 加载图标信息
    this.drawLine();
    // 加载图形信息
    this.getHomeDataNum();
    // this.getEchartsData();
    // 获取全局状态的vuex的状态
    //  console.log('获取全局状态的vuex的状态',this.$store.state.count) // true
    //  this.$store.commit('increment')
    // console.log('修改vuex的状态',this.$store.state.count)
  },
  methods: {
    // 获取数据统计信息
    getHomeDataNum() {
      this.$http.article.getHomeData().then(res => {
        this.addUserNum = res.result;
        console.log("获取首页数据统计", res);
      });
    },
    //获取Echarts数据图形列表
    // getEchartsData() {

    // },
    drawLine() {
      this.$http.article.getEcharts().then(res => {
        console.log("获取图形列表参数", res);

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 绘制图表
        myChart.setOption({
          title: {
            text: "铲屎官统计表"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["用户量", "入驻商家", "营收"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            data: res.result.dateList
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "用户量",
              type: "line",
              // data: [120, 132, 101, 134, 90, 230, 210]
              data: res.result.userList
            },
            {
              name: "入驻商家",
              type: "line",
              // data: [220, 182, 191, 234, 290, 330, 310]
              data: res.result.businessList
            },
            {
              name: "营收",
              type: "line",
              // data: [150, 232, 201, 154, 190, 330, 410]
              data: res.result.orderList
            }
          ]
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  .boxleft {
    width: 200px;
    height: 200px;
    // background-color: salmon;
    text-align: center;
    line-height: 100px;

    font-weight: bold;
    font-family: Microsoft YaHei;
    font-size: 22px;
  }
  .boxright {
    flex: 1;
    // background-color: seagreen;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #50bfff;
    .el-icon-s-shop {
      font-size: 150px;
      text-align: center;
    }
    .el-icon-s-marketing {
      font-size: 150px;
      text-align: center;
      color: #dd5044;
    }
    .el-icon-s-data {
      font-size: 150px;
      text-align: center;
      color: #4fbe8d;
    }
  }
}

.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
}
.box-card {
  width: 96%;
  height: 200px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
  border-radius: 20px;
}
.card {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  // background-color: #fff;
}
</style>